import { getAppData, setGlobalData } from '@utils/tools'
import { AtTabs, AtModalAction, AtModal, AtModalContent, AtModalHeader } from "taro-ui"
import { BasePage } from '@common/components/base-page'
import NavigationBar from '@components/navBar'
import { View, Image, Text, Button } from '@tarojs/components'
import watch from '../../../assets/img/watch.png'
import aqy from '../../../assets/img/aqy.png'
import copy from '../../../assets/img/copy.png'
import noData from '../../../assets/img/no-data.png'
import close from '../../assets/img/close.png'
import changeImg from '../../assets/img/change-img.png'
// import './index.scss'
import '../../assets/style/external.scss'
import '../../assets/style/common.scss'
import style from './index.module.scss'


interface IProps {
    info: string,
    open?: boolean,
    close: any,
    isSuccess?: boolean,
    isContentModal?: boolean
}
interface IState {
    expressInfo: any,
    cardInfo: any
}


export default class Modal extends BasePage<IProps, IState> {
    constructor(props) {
        super(props);
        this.state = {
            expressInfo: [
                { name: '快递公司', key: 0, val: '顺丰快递' },
                { name: '快递单号', key: 1, val: 'SF8393920208847' }
            ],
            cardInfo: [
                { name: '卡号：', val: '233340066' },
                { name: '密钥：', val: '3456' }
            ]
        }
    }
    handleClose = () => {
        this.props.close()
    }

    render() {
        const { expressInfo, cardInfo } = this.state
        return (
            <>
                {/* modal物流信息弹窗 */}
                {
                    this.props.open &&
                    <AtModal isOpened={this.props.open}>
                        <View className={style.expressCon}>
                            <AtModalHeader><Text className='text30'>物流信息</Text>
                                <Image className='image-xl close-x' src={close} onClick={this.handleClose}></Image>
                            </AtModalHeader>
                            <AtModalContent>
                                {
                                    this.props.info === 'express' && expressInfo.map(item => {
                                        return (
                                            <View className='padding-bottom-xl'>
                                                <Text className='text-gray1 padding-right-xl textSm'>{item.name}</Text>
                                                <Text className='text-black textSm weight600'>{item.val}</Text>
                                                {
                                                    item.key === 1 && <View className='inline-b padding-left-lg'>
                                                        <View className='image-sm copy'></View>
                                                        <Text className='text-gray1 textSm info-copy'>复制</Text>
                                                    </View>
                                                }
                                            </View>
                                        )
                                    })
                                }
                            </AtModalContent>

                        </View>

                    </AtModal>
                }

                {this.props.isSuccess &&
                    <AtModal isOpened={this.props.isSuccess}>
                        <View className={style.modalCon}>
                            <AtModalHeader>
                                <Image className='image-xl close-x' src={close} onClick={this.handleClose}></Image>
                            </AtModalHeader>
                            <AtModalContent>
                                {
                                    this.props.info === 'success' &&
                                    <View className={style.align}>
                                        <Image className={style.changesty} src={changeImg}></Image>
                                        <View className={style.text}>兑换成功</View>
                                    </View>
                                }
                            </AtModalContent>
                        </View>
                    </AtModal>
                }
                {this.props.isContentModal &&
                    <AtModal isOpened={this.props.isContentModal}>
                        <View className={style.imageCon}>
                            <AtModalHeader>
                                <Image className='image-xl close-x' src={close} onClick={this.handleClose}></Image>
                            </AtModalHeader>
                            <AtModalContent>
                                
                            </AtModalContent>
                        </View>
                    </AtModal>
                }

            </>
        )
    }
}
